// login page
@import 'layout_variables';
@import './variables';

body.caerp.login-view {
	.layout {
		height: 100vh;
	}

	.two_cols.third .login_form {
		padding: var(--padding-5xl);
	}

	.login_form {
		box-shadow: 0 0 10px var(--login-atwork-shadow-color);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		z-index: $actionLayer;

		.logos {
			flex: 1 0 auto;

			.flex {
				align-items: center;
				display: flex;
				justify-content: space-between;
			}

			.caerp_logo,
			.cae_logo {
				height: auto;
				max-height: 3rem;
				max-width: 40%;
				width: auto;
			}
		}

		.loginbox {
			flex: 3 0 auto;
		}

		form {
			padding-bottom: 30px;

			input[type="text"],
			input[type="password"] {
				width: 100%;
			}
		}

		.login_footer {
			align-items: flex-end;
			display: flex;
			font-size: .75rem;
			justify-content: space-between;
			flex: 0 0 auto;

			p:first-child {
				margin-right: var(--padding-s);
			}

			p:last-child {
				margin-left: var(--padding-s);
				text-align: right;
			}

			a {
				text-decoration: none;
			}

			a:hover,
			a:focus,
			a:active {
				text-decoration: underline;
			}
		}

		footer {
			font-size: .75rem;
			padding: var(--padding-m) 0 0;
			text-align: center;
		}
	}

	.atwork_photo {
		background-color: var(--static-color);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;

		>p {
			background: var(--login-atwork-background-color);
			bottom: 10px;
			font-size: .75rem;
			padding: var(--padding-s) var(--padding-m);
			position: absolute;
			right: 10px;
			text-align: right;
			text-shadow: 0 0 1px var(--login-text-shadow-color);
			max-width: calc(100% - 20px);

			&:hover {
				background: var(--login-atwork-hover-background-color);
			}
		}
	}

	.login_icons {
		align-items: center;
		background-color: var(--static-color);
		display: flex;
		justify-content: center;

		>div {
			align-items: center;
			display: flex;
			flex-wrap: wrap;
			height: 24vw;
			justify-content: center;
			width: 24vw;
		}

		svg {
			fill: var(--static-invert-color);
			height: 4vw;
			margin: 0 2vw;
			width: 4vw;

		}
	}
}

@media (max-width: $mobileWidth ) {
	body.caerp.login-view {
		.layout.flex {
			max-width: 100vw;
		}

		.two_cols.third .login_form {
			padding: var(--padding-5xl) 0;

			>div {
				padding-left: var(--padding-m);
				padding-right: var(--padding-m);
			}
		}

		.login_form {
			box-shadow: none;

			form {
				padding-top: 40px;
			}
		}

		.login_icons>div {
			height: 60vw;
			width: 60vw;

			svg {
				height: 12vw;
				margin: 4vw;
				width: 12vw;
			}
		}
	}
}

@media (max-width: $tabletWidth ) and (min-width: $mobileWidth ) {
	body.caerp.login-view {
		.logos {
			left: var(--padding-xl);
			position: absolute;
			top: 50px;

			.flex {
				flex-direction: column;
			}

			.cae_logo {
				margin-top: var(--padding-5xl);
			}
		}

		.login_form {

			form,
			.login_footer,
			footer {
				margin-left: 11.125rem;
			}

			.login_footer {
				padding-top: 20px;
			}
		}

		.login_icons>div {
			height: 30vw;
			width: 30vw;

			svg {
				height: 6vw;
				margin: 2vw;
				width: 6vw;
			}
		}
	}
}

@media (max-width: $tabletWidth ) {
	body.caerp.login-view {
		overflow-y: auto;

		.layout {
			height: auto;
			min-height: 100vh;
		}

		.two_cols.third .login_form {
			flex-basis: 100% !important;
			padding: var(--padding-5xl) var(--padding-xl);

			form {
				flex: 1 0 auto;
			}
		}

		.atwork_photo,
		.login_icons {
			flex-basis: 100% !important;
			min-height: 50vh;
		}
	}
}
